<template>
	<view class="" v-if="status==2">
		<view class="tgm">
			<view class="tgm_t">

				<view class="img">
					<!-- <image src="../../static/index/ewm.png" class="w342" mode=""></image> -->
					<image :src="img" class="w342" mode=""></image>
				</view>
				<!-- <button class="" @click="saveShareImg">
					保存二维码
				</button> -->
				<!-- <button class="">
					手动截图保存二维码
				</button> -->

			</view>
		</view>
		<!-- <view class="" style=" color: #fff; background: #8639fc;margin-top: -10vh;padding: 40rpx 20rpx;"> -->
		<!-- <view class="" style="color: #fff; background: #8639fc;padding: 40rpx 20rpx;"> -->
		<!-- <rich-text style="color: #000; " :nodes="node"></rich-text> -->
		<u-parse style=" color: #fff; background: #8639fc;margin-top: -10vh;padding: 40rpx 20rpx;"
			:content="node"></u-parse>
		<!-- </view> -->
		<!-- </view> -->
		<uv-qrcode ref="qrcode" size="400px" style="position: fixed;top: -800px;" :value="val"></uv-qrcode>
	</view>

	<view class="flex-col page" v-else>
		<view class="flex-col group">
			<view class="topView flex-column-center">
				<view class="topTitle">
					渠道商规则
				</view>
				<view class="topTitle1">
					{{nodes}}
				</view>
			</view>
			<view class="flex-col group_1">
				<view class="flex-col">
					<view class="flex-row section_1">
						<text class="text_1">身份证姓名</text>
						<input class="text_2" type="text" v-model.trim="realname" placeholder="请输入姓名" />
					</view>
					<view class="section_3 flex-row" style="position: relative;">
						<view class="" style="position: absolute;left: 36rpx;top: -18rpx;font-size: 22rpx;color: #999;">
							(身份信息只做审核使用)
						</view>
						<text class="text_6">身份证证件号</text>
						<input type="text" v-model="cardsn" class="text_7" placeholder="输入身份证件号" placeholder-class="">
					</view>
					<view class="flex-row section_2">
						<text class="text_3">性别</text>
						<u-radio-group style="margin-left: 48rpx;" v-model="radiovalue1" placement="row">
							<u-radio v-for="(item, index) in radiolist1" :key="index" style="margin-right: 8rpx;"
								activeColor=" #C74BF0" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="section_3 flex-row">
						<text class="text_6">联系方式</text>
						<input class="text_7" type="number" disabled v-model.trim="mobile" placeholder="请输入联系方式" />

					</view>
					<view class="section_3 flex-row">
						<text class="text_8">店铺名称</text>
						<input class="text_9" type="text" v-model.trim="trade_name" placeholder="请输入店铺名称" />
					</view>
					<view class="section_3 flex-row" @click="showCity">
						<text class="text_8">店铺地址</text>
						<input class="text_9" type="text" disabled v-model.trim="address" placeholder="请选择店铺地址"
							style="flex: 1;" />
					</view>
					<view class="section_3 justify-between">
						<view class="flex-row">
							<text class="text_10">所在城市</text>
							<tm-pickersCity @confirm="selectedCity" btn-color="bg-gradient-deep-purple-accent"
								class="text_11">
								<text>{{ city ? city : '选择所在城市' }}</text>
							</tm-pickersCity>
						</view>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_5" />
					</view>
					<view class="flex-col section_4">
						<text>从事过什么行业？</text>
						<view class="">
							<u--textarea v-model="industry"></u--textarea>
						</view>
					</view>
					<view class="flex-col section_4">
						<text>自我优势介绍</text>
						<view class="">
							<u--textarea v-model="advantage"></u--textarea>
						</view>

					</view>
				</view>

				<view class="flex-col items-center button" @click="submit">
					<text>提交</text>
				</view>

			</view>
		</view>
		<Flame-chooseLocation v-model="cityshow" mapkey="XIKBZ-INHKI-FOPGM-URZ5L-FLXZE-DPBVR" @confirm="confirm1">
		</Flame-chooseLocation>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';
import tmPickersCity from '@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue';
import AraleQRCode from "arale-qrcode";
import {
	pathToBase64,
	base64ToPath
} from '@/js_sdk/mmmm-image-tools/index.js'
import {
	uploadImage
} from '@/config/utils'
export default {
	components: {
		tmPickersCity
	},
	data () {
		return {
			nodes: '',
			radiolist1: [{
				name: '男',
				disabled: false
			},
			{
				name: '女',
				disabled: false
			}],
			radiolist2: [{
				name: '是',
				disabled: false
			},
			{
				name: '否',
				disabled: false
			}],
			mssg: '',
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '男',
			radiovalue2: '是',
			realname: '',
			cardsn: '',
			mobile: uni.getStorageSync('user').phone,
			trade_name: '', //店名
			address: '', //地址
			province: '',
			city: '',
			city1: '',
			district: '',
			age: "",
			avatar: '',
			desc: '',
			status: '', //认证 1=成功
			flag: false,
			team: '',
			industry: '',
			advantage: '',
			src: "",
			img: '',
			node: '',
			val: '',
			cityshow: false
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad (options) {
		this.$http.post('api/sys/rule ').then(res => {
			this.nodes = res;
			console.log(res);
		})
		this.$http.post('api/sys/article', {
			id: '5'
		}).then(res => {
			this.node = res.content;
			console.log(res);
		})
		this.status = options.status
		// this.status = 2
		// console.log(this.userInfo.data.token.uid, 'userInfouserInfouserInfo');
	},
	mounted () {
		this.makeCode();
	},
	methods: {
		goFan () {
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}, 800)
		},
		confirm1 (val) {
			this.lat = val.location.lat;
			this.lng = val.location.lng;
			// 		this.address = res.name
			// 		this.districts = this.province + this.city + this.district;
			// 		this.lat = res.latitude;
			// 		this.lng = res.longitude;
			console.log(val, 'valvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalval');
			// this.selectLocatin = val
			if (val.ad_info) {
				this.province = val.ad_info.province
				this.city = val.ad_info.city
				this.district = val.ad_info.district
				this.address = val.address + val.title
				this.districts = val.address + val.title
			}
			else {
				this.province = val.province
				this.city = val.city
				this.district = val.district
				this.address = val.address + val.title
				this.districts = val.address + val.title
			}
		},
		showCity () {
			this.cityshow = true
			// uni.chooseLocation({
			// 	success: (res) => {
			// 		console.log(res)
			// 		this.address = res.address;
			// 		// let reg = /.+?(省|市|自治区|自治州|镇|县|区)/g;
			// 		// let arr = this.districts.match(reg);
			// 		// console.log(arr) //省市区
			// 		// 			this.province = arr[0];
			// 		// 			this.city = arr[1];
			// 		// 			if (arr[2]) {
			// 		// 				this.district = arr[2];
			// 		// 			} else {
			// 		// 				this.district = arr[1];
			// 		// 			}

			// 		// 			this.address = res.name
			// 		// 			this.districts = this.province + this.city + this.district;
			// 		// 			this.lat = res.latitude;
			// 		// 			this.lng = res.longitude;
			// 	}
			// })
			// this.$refs.mpvueCityPicker.show();
		},
		selectedCity (e) {
			// if (e[0] == '北京市' || e[0] == '重庆市' || e[0] == '上海市' || e[0] == '天津市') {
			// 	this.city = e[0]
			// } else {
			// 	this.city = e[1]
			// }
			this.city = e[0] + ' ' + e[1] + ' ' + e[2]
			this.province = e[0]
			this.city1 = e[1]
			this.district = e[2]
			console.log(this.city, "fnain")
		},
		upload () {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					let {
						tempFilePaths
					} = res;
					let filePath = tempFilePaths[0]
					uploadImage(filePath).then(res => {
						this.avatar = res;
						console.log(res);

					})
					console.log(tempFilePaths)
				}
			})
		},
		submit () {
			if (!this.realname) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				});
				return;
			}
			if (!this.cardsn) {
				uni.showToast({
					icon: 'none',
					title: '请输入身份证'
				});
				return;
			}
			if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确格式的手机号'
				});
				return;
			}

			if (!this.city) {
				uni.showToast({
					icon: 'none',
					title: '请先选择所在城市'
				});
				return;
			}
			this.$http.post('api/partner/apply', {
				real_name: this.realname,
				id_card: this.cardsn,
				sex: this.radiovalue1,
				link_mobile: this.mobile,
				trade_name: this.trade_name,
				address: this.address,
				province: this.province,
				city: this.city1,
				district: this.district,
				intro: this.industry,
				advantage: this.advantage
			}).then(res => {
				uni.showToast({
					icon: 'none',
					title: '已提交审核，请耐心等待'
				})
				console.log("122121")
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/indexNew'
					})
				}, 1000)
			})
		},
		//生成二维码方法
		makeCode () {
			this.val = "https://app.aishangpeiwan.com/h5/#/pages/user/login?pid=" + this.userInfo.data.token.uid
			// const result = new AraleQRCode({
			// 	render: "svg", // 定义生成的类型 'svg' or 'table dom’
			// 	text: "https://app.aishangpeiwan.com/h5/#/pages/user/login?pid=" + this.userInfo.data.token.uid
			// 		// text: "https://app.aishangpeiwan.com/h5/#/pages/index/indexNew?fid=" +
			// 		, // 二维码的链接this.member.pid
			// 	size: 170, //二维码大小
			// });
			// const svgXml = new XMLSerializer().serializeToString(result);
			// const src =
			// 	"data:image/svg+xml;base64," +
			// 	window.btoa(unescape(encodeURIComponent(svgXml)));
			setTimeout(() => {
				this.$refs.qrcode.toTempFilePath({
					success: (res) => {
						console.log(res.tempFilePath);

						this.src = res.tempFilePath
						localStorage.setItem("image", this.src);
						this.getImg();
					}
				});
			}, 500)
			// this.src = src
			// 本地存储图片

		},

		// 获取存储的图片给到页面
		getImg () {
			this.img = localStorage.getItem("image");
			console.log("$$$$", this.img);
			localStorage.removeItem("image");
		},
		saveShareImg () {
			base64ToPath(this.src)
				.then(path => {
					console.log(path)
				})
				.catch(error => {
					console.error(error)
				})
		}

	}
};
</script>

<style scoped lang="scss">
button {
	position: absolute;
	left: 130rpx;
	bottom: 90rpx;
	width: 400rpx;
	color: rgb(255, 255, 255);
	font-size: 32rpx;
	line-height: 66rpx;
	background: linear-gradient(90deg, #C74BF0 0%, #8438FC 100%);
	border-radius: 100px;
}

.tgm {
	height: 100vh;
	margin-top: -120rpx;
	background-image: url("../../../static/index/bg2.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	position: relative;
}

.tgm_t {
	width: 654rpx;
	height: 900rpx;
	position: absolute;
	top: 360rpx;
	right: 50rpx;
	background-image: url("../../../static/index/bg3.png");
	// background-image: url(../);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

.img {
	position: absolute;
	top: 218rpx;
	right: 128rpx;
	// width: 374rpx;
	// height: 374rpx;
	padding: 30rpx;
	text-align: center;
	background: #8438FC;
	border-radius: 20rpx 20rpx 20rpx 20rpx;

}

.w342 {
	width: 342rpx;
	height: 342rpx;
}

.topsrcomage {
	width: 100%;
	height: 100%;
}

.tyop {
	text-align: center;
}

.sersdrefuia {
	height: 550rpx;
}

.textbackground {
	width: 90%;
	height: 70rpx;
	background-color: #31d081;
	color: white;
	border-radius: 50rpx;
	align-items: center;
	text-align: center;
	line-height: 70rpx;
	font-size: 30rpx;
	margin: 150rpx auto;
}

.centerser {
	width: 80%;
	height: 650rpx;
	background-color: white;
	border-radius: 15rpx;
	margin: -60rpx auto;
}

.topser {
	background-color: #17ba92;
	width: 100%;
	height: 350rpx;
}

.boxserss {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

.yin {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;

}

.dog {
	width: 70%;
	height: 10%;
	background-color: white;
	border-radius: 8rpx;
	margin: 100rpx auto;
	display: flex;
	align-items: center;
	justify-content: center;
}



.page {
	background-color: #f8f8f8;
	width: 100%;
	height: 100%;
	overflow-y: auto;

	.group {
		padding-bottom: 100rpx;
		flex: 1 1 auto;
		overflow-y: auto;
		padding-top: 20rpx;

		.image_1 {
			width: 100vw;
			height: 53.5vw;
		}

		.group_1 {
			margin-top: -10rpx;
			padding: 0 32rpx;
			position: relative;

			.button {
				margin-top: 50rpx;
				padding: 22rpx 0;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background: linear-gradient(90deg, #C74BF0 0%, #8438FC 100%);
				border-radius: 82rpx;
			}

			.section_1 {
				padding: 28rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.text_1 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_2 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.section_2 {
				padding: 24rpx 24rpx 26rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);

				.text_3 {
					margin-top: 4rpx;
				}

				.image_2 {
					width: 44rpx;
					height: 44rpx;
				}

				.image_3 {
					margin-left: 48rpx;
				}

				.text_4 {
					margin-left: 4rpx;
					margin-top: 4rpx;
				}

				.image_4 {
					margin-left: 40rpx;
				}

				.text_5 {
					margin-left: 4rpx;
					margin-bottom: 4rpx;
				}
			}

			.section_3 {
				padding: 28rpx 24rpx;
				background-color: rgb(255, 255, 255);

				.text_6 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_7 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_8 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_9 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.image_5 {
					margin-bottom: 6rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.text_10 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_11 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					width: 450rpx;
				}
			}

			.section_4 {
				padding: 28rpx 23rpx 31rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				border-radius: 0px 0px 24rpx 24rpx;

				.group_4 {
					margin-top: 31rpx;
					padding: 71rpx 0 71rpx;
					position: relative;

					.image_6 {
						margin-left: 71rpx;
						width: 56rpx;
						height: 56rpx;
					}

					.image_7 {
						border-radius: 24rpx;
						width: 198rpx;
						height: 198rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.avatar {
						border-radius: 24rpx;
						position: absolute;
						width: 198rpx;
						height: 198rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
					}
				}
			}
		}
	}
}

.topView {
	margin: 20rpx 30rpx;
	padding: 28rpx 30rpx;
	background: linear-gradient(360deg, #C74BF0 0%, #8438FC 100%);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
}

.topTitle {
	font-size: 30rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	color: #FFFFFF;
}

.topTitle1 {
	margin-top: 10rpx;
	font-size: 26rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	color: #FFFFFF;
	margin-bottom: 20rpx;
}
</style>